<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body></body>
</html>
<script>
  // 常量路由：全部用户都可以访问到的路由
  let constRoute = [
    {
      // 登录页
      path: "/login",
      component: () => import("@/views/login/index.vue"),
      name: "login", // 命名路由
      meta: {
        title: "登录", // 菜单标题
        hidden: true, // 代表路由标题在菜单中是否隐藏  true：隐藏  false：不隐藏
        icon: "Promotion", // 菜单文字左侧的图标,支持 element-plus 全部图标
      },
    },
    {
      // 登录成功展示页面
      path: "/",
      component: () => import("@/layout/index.vue"),
      name: "layout", // 命名路由
      meta: {
        title: "", // 菜单标题
        hidden: false, // 代表路由标题在菜单中是否隐藏  true：隐藏  false：不隐藏
        icon: "",
      },
      redirect: "/home",
      children: [
        {
          path: "/home",
          component: () => import("@/views/home/index.vue"),
          meta: {
            title: "首页", // 菜单标题
            hidden: false, // 代表路由标题在菜单中是否隐藏  true：隐藏  false：不隐藏
            icon: "HomeFilled",
          },
        },
      ],
    },
    {
      path: "/screen",
      component: () => import("@/views/screen/index.vue"),
      name: "Screen",
      meta: {
        title: "数据大屏", // 菜单标题
        hidden: false, // 代表路由标题在菜单中是否隐藏  true：隐藏  false：不隐藏
        icon: "Platform", // 菜单文字左侧的图标,支持 element-plus 全部图标
      },
    },
    {
      // 404
      path: "/404",
      component: () => import("@/views/404/index.vue"),
      name: "404", // 命名路由
      meta: {
        title: "404", // 菜单标题
        hidden: true, // 代表路由标题在菜单中是否隐藏  true：隐藏  false：不隐藏
      },
    },
  ];
  // 异步路由：用户的人有这个路由，有的人没有[动态追加异步路由]
  let asnycRoute = [
    {
      path: "/acl",
      component: () => import("@/layout/index.vue"),
      name: "Acl",
      meta: {
        title: "权限管理",
        hidden: false,
        icon: "Lock",
      },
      redirect: "/acl/user",
      children: [
        {
          path: "/acl/user",
          component: () => import("@/views/acl/user/index.vue"),
          name: "User",
          meta: {
            title: "用户管理",
            hidden: false,
            icon: "User",
          },
        },
        {
          path: "/acl/role",
          component: () => import("@/views/acl/role/index.vue"),
          name: "Role",
          meta: {
            title: "角色管理",
            hidden: false,
            icon: "UserFilled",
          },
        },
        {
          path: "/acl/permission",
          component: () => import("@/views/acl/permission/index.vue"),
          name: "Permission",
          meta: {
            title: "菜单管理",
            hidden: false,
            icon: "Monitor",
          },
        },
      ],
    },
    {
      path: "/product",
      component: () => import("@/layout/index.vue"),
      name: "Product",
      meta: {
        title: "商品管理",
        icon: "Goods",
        hidden: false,
      },
      redirect: "/product/trademark",
      children: [
        {
          path: "/product/trademark",
          component: () => import("@/views/product/trademark/index.vue"),
          name: "Trademark",
          meta: {
            title: "品牌管理",
            icon: "ShoppingCartFull",
          },
        },
        {
          path: "/product/attr",
          component: () => import("@/views/product/attr/index.vue"),
          name: "Attr",
          meta: {
            title: "属性管理",
            icon: "ChromeFilled",
          },
        },
        {
          path: "/product/spu",
          component: () => import("@/views/product/spu/index.vue"),
          name: "SPU",
          meta: {
            title: "spu管理",
            icon: "Calendar",
          },
        },
        {
          path: "/product/sku",
          component: () => import("@/views/product/sku/index.vue"),
          name: "SkU",
          meta: {
            title: "sku管理",
            icon: "Orange",
          },
        },
      ],
    },
  ];
  // 任意路由
  let anyRouter = {
    path: "/:pathMatch(.*)*",
    redirect: "/404",
    name: "Any", // 命名路由
    meta: {
      title: "任意路由", // 菜单标题
      hidden: true, // 代表路由标题在菜单中是否隐藏  true：隐藏  false：不隐藏
    },
  };

  let jisoo = ["Product", "SkU"];
  function filterAsyncRoute(asnycRoute, routes) {
    return asnycRoute.filter((item) => {
      if (routes.includes(item.name)) {
        if (item.children && item.children.length > 0) {
          item.children = filterAsyncRoute(item.children, routes);
        }
        return true;
      }
    });
  }
  let rose = filterAsyncRoute(asnycRoute, jisoo);
  console.log(rose);
</script>
